/*
 * @Author: your name
 * @Date: 2020-05-06 09:29:56
 * @LastEditTime: 2020-11-02 14:19:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /yigo/src/Pages/LoginScreen.js
 */
import React, { Component } from 'react'
import { View, 
         Image,
         Text,
         TextInput,
         ScrollView,
         TouchableOpacity,
         StyleSheet } from 'react-native'
import { connect } from 'react-redux'
import { onLogin } from '../Actions/UserActions'
import Button from 'apsl-react-native-button'
import Storage from '../Utils/AsyncStorage'
import CountDownButton from 'react-native-smscode-count-down'
import { Picker, DatePicker, SegmentedControl, List} from '@ant-design/react-native';

const info = [
    {title:'我是用户',index:0},
    {title:'我是商家',index:1},
    {title:'我是骑手',index:2}
];
import { Toast } from '@ant-design/react-native'

class LoginScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            phone:'13811421515',  //手机号
            code:'',   //验证码
            userType:null,    //用户类型    0:用户  1:商家  2: 骑手
        }
    }

    Login() {
        let body = {
            phone:this.state.phone,
            userType: this.state.userType
        };
        this.props.Login(body)
    }
    /**
     * @description: 保存用户信息 跳转到主页
     * @param {type} 
     * @return: 
     */
    saveUserInfo = (userInfo) => {
        Storage.save('token',userInfo).then((error) => {
            if (!error) {
                this.props.refreshToken({userInfo})
            }
        })
    }
    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.isFetch && !nextProps.isFetch) {
            if (nextProps.code == 200) {
              let userInfo = nextProps.data
              global.userInfo = userInfo;
              console.log("用户登录信息:",userInfo);
              this.saveUserInfo(userInfo)
            } else {
                Toast.success(nextProps.msg)
            }
        }
        return true;
    }

    onChangeText(key, value) {
        this.setState({[key]: value})
    }
    
    onLongPress() {
        //长按去注册商家
        this.props.navigation.navigate('BusinessRegisterScreen')
    }

    chooseUserView(type) {
        this.setState({userType:type},() => {
            this.myScrollView.scrollTo({ x: this.layoutX, y: 0, animated: true});
        })
    }

    userInfo = () => {
        return (
            <View style={{justifyContent:'space-around',height:360,width:'80%'}}>
                <ScrollView 
                
                    horizontal={true} 
                    pagingEnabled={true}
                    ref={(view) => { this.myScrollView = view; }}
                    style={{flex:1,width:'100%',height:200}}>
                        <View style={{width:300, height:'100%',justifyContent:'space-around',alignItems:'center'}}>
                            {info.map((item,i) => {
                                return (
                                    <TouchableOpacity onPress={this.chooseUserView.bind(this,i)} style={[styles.chooseStyle, this.state.userType === i && {backgroundColor:'tomato'}]}>
                                        <Text>{item.title}</Text>
                                    </TouchableOpacity>
                                );
                            })}
                        </View>

                        <View onLayout={event=>{this.layoutX = event.nativeEvent.layout.x}} 
                              style={{width:300, height:'100%',justifyContent:'center', alignItems:'center'}}>
                            <View style={styles.tipBigView}>
                                <Image source={require('../Images/combinedShape.png')}/>
                                <TextInput
                                    value={this.state.phone}
                                    style={styles.textInputStyle} 
                                    placeholderTextColor='white' 
                                    onChangeText={this.onChangeText.bind(this, 'phone')} 
                                    underlineColorAndroid='transparent' 
                                    placeholder='请输入手机号' 
                                    maxLength={11} 
                                    clearButtonMode='always'>    
                                </TextInput>
                                </View>


                                <View style={styles.tipBigView}>
                                <View style={{flexDirection:'row',alignItems:'center',flex:1}}>
                                <Image source={require('../Images/lock.png')}/>
                                <TextInput 
                                    value={this.state.code}
                                    style={styles.textInputStyle} 
                                    placeholderTextColor='white' 
                                    onChangeText={this.onChangeText.bind(this, 'code')} 
                                    underlineColorAndroid='transparent' 
                                    placeholder='请输入验证码' 
                                    maxLength={8} 
                                    clearButtonMode='always'>
                                </TextInput>
                                </View>
                                


                                <CountDownButton
                                    style={{width: 110,marginRight: 0}}
                                    executeFunc={(shouldStartingCounting)=>{
                                        this.shouldStartingCounting = shouldStartingCounting
                                    }}
                                    textStyle={{color: 'blue'}}
                                    timerCount={60}
                                    timerTitle={'获取验证码'}
                                    enable={true}

                                    // enable={this.state.phone.length > 10}
                                    onClick={(shouldStartCountting)=>{
                                        //随机模拟发送验证码成功或失败
                                        const requestSucc = Math.random() > 0.5;
                                        shouldStartCountting(requestSucc)
                                    }}
                                    timerEnd={()=>{
                                        this.setState({
                                        state: '倒计时结束'
                                        })
                                }}/>
                                
                                </View>

                                {/* <SegmentedControl
                                        tintColor='tomato'
                                        style={{width: 100,height: 30,marginLeft:20}}
                                        values={['个人','商家']}
                                        selectedIndex={this.state.userType}
                                        onChange={(event) => this.setState({userType:event.nativeEvent.selectedSegmentIndex})}/> */}

                                <Button style={styles.buttonStyle} isLoading={this.props.isFetch} textStyle={{fontSize: 18,color: 'white'}} onPress={() => this.Login()}>登 录</Button>
                                <Text onLongPress={this.onLongPress.bind(this)}>长按商家注册</Text>
                                        </View>

                    
                </ScrollView>
                

            </View>
        )
    }
    render() {  
        return (
            <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                {this.userInfo()}
                {/* <View style={styles.tipBigView}>
                  <Image source={require('../Images/combinedShape.png')}/>
                  <TextInput
                      value={this.state.phone}
                      style={styles.textInputStyle} 
                      placeholderTextColor='white' 
                      onChangeText={this.onChangeText.bind(this, 'phone')} 
                      underlineColorAndroid='transparent' 
                      placeholder='请输入手机号' 
                      maxLength={11} 
                      clearButtonMode='always'>    
                  </TextInput>
                </View>


                <View style={styles.tipBigView}>
                  <View style={{flexDirection:'row',alignItems:'center',flex:1}}>
                  <Image source={require('../Images/lock.png')}/>
                  <TextInput 
                      value={this.state.code}
                      style={styles.textInputStyle} 
                      placeholderTextColor='white' 
                      onChangeText={this.onChangeText.bind(this, 'code')} 
                      underlineColorAndroid='transparent' 
                      placeholder='请输入验证码' 
                      maxLength={8} 
                      clearButtonMode='always'>
                  </TextInput>
                  </View>
                  


                  <CountDownButton
                      style={{width: 110,marginRight: 0}}
                      executeFunc={(shouldStartingCounting)=>{
                        this.shouldStartingCounting = shouldStartingCounting
                      }}
                      textStyle={{color: 'blue'}}
                      timerCount={60}
                      timerTitle={'获取验证码'}
                      enable={true}

                      // enable={this.state.phone.length > 10}
                      onClick={(shouldStartCountting)=>{
                        //随机模拟发送验证码成功或失败
                        const requestSucc = Math.random() > 0.5;
                          shouldStartCountting(requestSucc)
                      }}
                      timerEnd={()=>{
                        this.setState({
                          state: '倒计时结束'
                        })
                  }}/>
                  
                </View>

                <SegmentedControl
                        tintColor='tomato'
                        style={{width: 100,height: 30,marginLeft:20}}
                        values={['个人','商家']}
                        selectedIndex={this.state.userType}
                        onChange={(event) => this.setState({userType:event.nativeEvent.selectedSegmentIndex})}/>

                <Button style={styles.buttonStyle} isLoading={this.props.isFetch} textStyle={{fontSize: 18,color: 'white'}} onPress={() => this.Login()}>登 录</Button>
                <Text onLongPress={this.onLongPress.bind(this)}>长按商家注册</Text> */}
            </View>);      
    }
}

const styles = StyleSheet.create({
    tipBigView: {
      backgroundColor: 'rgba(0, 0, 0, 0.24)',
      flexDirection: 'row',
      height: 50,
      marginBottom: 20,
      borderRadius: 5,
      alignItems: 'center',
      paddingLeft: 15,
      marginLeft:20,
      marginRight:20
      },
      textInputStyle: {
        paddingLeft: 8,
        // width: 300,
        // backgroundColor:'red',
        flex:1,
        height: 35,
        fontSize: 14,
        marginLeft: 3,
        color: 'white',
        paddingBottom:0,
        paddingTop:0
      },
      buttonStyle: {
        height: 44,
        flexDirection: 'row',
        alignItems: 'center',
        borderWidth: 0,
        borderRadius: 22,
        marginBottom: 30,
        marginTop: 40,
        alignSelf: 'stretch',
        justifyContent: 'center',
        backgroundColor: '#F66701',
        margin: 20
      },
      chooseStyle:{
          width:200, 
          height:80,
          justifyContent:'center', 
          alignItems:'center',
          backgroundColor:'#dcdcdc'
        }
});

const mapStateToProps = (state) => {
    return {isFetch,code,data} = state.UserInfo.onLogin || ''
}
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        Login: (paramter)=> dispatch(onLogin(paramter)),
        refreshToken:(paramter) => dispatch({type:'RefreshToken',...paramter})
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(LoginScreen)
